import React from "react"
import { Input } from 'antd';
import type { GetProps } from 'antd';
import { useNavigate } from "react-router";


type SearchProps = GetProps<typeof Input.Search>;
const { Search } = Input;



const SearchI:React.FC=()=>{
    // 编程式路由跳转
    const navLink = useNavigate();


    const onSearch: SearchProps['onSearch'] = (value, _e) => {
        navLink("/bookinfo",{state:{bookname:value}})
    }

    return (
        <main className="w-2/3 h-32 bg-slate-950 ml-48 mt-36 mb-56 pt-10" id="bgopacity">
            <div className="w-5/6 ml-14">
            <Search
                placeholder="请输入您要查阅的书籍名称"
                allowClear
                enterButton="查询"
                size="large"
                onSearch={onSearch}
            />
            </div>
        </main>
    );
}
export default SearchI;